<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON to HTML with jQuery</title>
    <style>
        .container {
            border: 1px solid #ccc;
            padding: 20px;
            margin: 20px;
        }
    </style>
    <!-- 引入 jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="app"></div>

    <script>
        // JSON 数据
        var data = {
            type: "div",
            attributes: {
                class: "container",
                id: "main-container"
            },
            children: [
                {
                    type: "h1",
                    content: "Hello, World!"
                },
                {
                    type: "p",
                    content: "This is a paragraph."
                },
                {
                    type: "ul",
                    children: [
                        { type: "li", content: "Item 1" },
                        { type: "li", content: "Item 2" },
                        { type: "li", content: "Item 3" }
                    ]
                }
            ]
        };

        // 将 JSON 解析成 HTML 的函数
        function jsonToHtml(json) {
            // 创建元素
            var element = $("<" + json.type + ">");

            // 设置属性
            if (json.attributes) {
                element.attr(json.attributes);
            }

            // 设置内容
            if (json.content) {
                element.text(json.content);
            }

            // 递归处理子元素
            if (json.children) {
                json.children.forEach(function(child) {
                    var childElement = jsonToHtml(child);
                    element.append(childElement);
                });
            }

            return element;
        }

        // 调用函数，将 JSON 解析成 HTML
        var htmlElement = jsonToHtml(data);

        // 将生成的 HTML 插入到页面中
        $("#app").append(htmlElement);
    </script>
</body>
</html>